<template>
	<el-drawer
	  v-model="dialog.visible"
	  :title="dialog.title"
	  append-to-body
	  @close="closeDialog"
	  :close-on-click-modal="false"
	  size="762"
	>
	
		<div>
			<div class="section-title">
			  <span class="title-form_primary">Rdbs关系数据库</span>
			</div>
			<div class="component-row">
				<div class="component-row-item" @click="handleClickComponent('oracle')">
					<img src="@/assets/datasource/oracle.png"/>
					<div class="component-row-item-info">
						<span class="component-row-item-info-title">Oracle</span>
						<div class="component-row-item-info-desc">
							<span>可以链接多个单机或集群的Oracle数据源</span>
						</div>
					</div>
				</div>
				<div class="component-row-item" @click="handleClickComponent('sqlserver')">
					<img src="@/assets/datasource/sqlServer.png"/>
					<div class="component-row-item-info">
						<span class="component-row-item-info-title">SqlServer</span>
						<div class="component-row-item-info-desc">
							<span>可以链接多个单机或集群的SqlServer数据源</span>
						</div>
					</div>
				</div>
				<div class="component-row-item" @click="handleClickComponent('mysql')">
					<img src="@/assets/datasource/mysql.png"/>
					<div class="component-row-item-info">
						<span class="component-row-item-info-title">Mysql</span>
						<div class="component-row-item-info-desc">
							<span>可以链接多个单机或集群的Mysql数据源</span>
						</div>
					</div>
				</div>
			</div>
			
			<div class="component-row">
				<div class="component-row-item" @click="handleClickComponent('postgresSQL')">
					<img src="@/assets/datasource/PostgresSQL.png"/>
					<div class="component-row-item-info">
						<span class="component-row-item-info-title">PostgresSQL</span>
						<div class="component-row-item-info-desc">
							<span>可以链接多个单机或集群的PostgresSQL数据源</span>
						</div>
					</div>
				</div>
				<div class="component-row-item" @click="handleClickComponent('sqlite')">
					<img src="@/assets/datasource/SQLite.gif"/>
					<div class="component-row-item-info">
						<span class="component-row-item-info-title">SQLite</span>
						<div class="component-row-item-info-desc">
							<span>可以链接多个单机或集群的SQLite数据源</span>
						</div>
					</div>
				</div>
			</div>
			
			<div class="section-title">
			  <span class="title-form_primary">非关系型数据库</span>
			</div>
			
			<div class="component-row">
				<div class="component-row-item">
					<img src="@/assets/datasource/Redis.png"/>
					<div class="component-row-item-info">
						<span class="component-row-item-info-title">Redis</span>
						<div class="component-row-item-info-desc">
							<span>可以链接多个单机或集群的Redis数据源</span>
						</div>
					</div>
				</div>
				<div class="component-row-item">
					<img src="@/assets/datasource/MongoDB.png"/>
					<div class="component-row-item-info">
						<span class="component-row-item-info-title">MongoDB</span>
						<div class="component-row-item-info-desc">
							<span>可以链接多个单机或集群的MongoDB数据源</span>
						</div>
					</div>
				</div>
			</div>
			
			<div class="section-title">
			  <span class="title-form_primary">实时数据源</span>
			</div>
			<div class="component-row">
				<div class="component-row-item">
					<img src="@/assets/datasource/MQTT.png"/>
					<div class="component-row-item-info">
						<span class="component-row-item-info-title">MQTT</span>
						<div class="component-row-item-info-desc">
							<span>可以同时链接多个MQTT Broker服务器</span>
						</div>
					</div>
				</div>
			</div>
			
			<div class="section-title">
			  <span class="title-form_primary">时序数据库</span>
			</div>
			
			<div class="component-row">
				<div class="component-row-item" @click="handleClickTimeSeriesComponent('InfluxDB')">
					<img src="@/assets/datasource/InfluxDB.png"/>
					<div class="component-row-item-info">
						<span class="component-row-item-info-title">InfluxDB</span>
						<div class="component-row-item-info-desc">
							<span>可以链接多个单机或集群的InfluxDB数据源</span>
						</div>
					</div>
				</div>
			</div>
			
			<div class="section-title">
			  <span class="title-form_primary">其它数据源</span>
			</div>
			
			<div class="component-row">
				<div class="component-row-item">
					<img src="@/assets/datasource/excel.png"/>
					<div class="component-row-item-info">
						<span class="component-row-item-info-title">Excel</span>
						<div class="component-row-item-info-desc">
							<span>通配置Excel数据源结构模板实现输入读写</span>
						</div>
					</div>
				</div>
			</div>
			
		</div>
	
		<template #footer>
		  <div class="dialog-footer">
			<el-button @click="closeDialog" :loading="loading">取 消</el-button>
		  </div>
		</template>
	</el-drawer>
</template>

<script lang="ts" setup>
	const loading = ref(false);
	
	const dialog = ref({
		visible:false,
		title:'',
	});
	
	const handleClickComponent=(type:string)=>{
		closeDialog();
		emits('selected','OLTP',type)
	}
	
	
	const handleClickTimeSeriesComponent=(type:string)=>{
		closeDialog();
		emits('selected','series',type)
	}
	
	
	
	async function openDialog(row?: any, type?: string) {
		dialog.value.visible=true;
		dialog.value.title='选择数据源组件';
	}
	
	const emits = defineEmits(['closeDialog','selected'])
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
	}
	
	defineExpose({
	  openDialog,closeDialog
	});
	
	onMounted(() => {
	});
</script>

<style scoped>
	
	.component-row{
		display: flex;
		margin-bottom: 2px;
		>.component-row-item{
			height: 108px;
			max-width: 238px;
			min-width: 238px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 8px;
			border: 1px solid var(--el-border-color-light);
			margin: 5px;;
			>img{
				width: 64px;
				margin-right: 8px;
			}
			.component-row-item-info{
				.component-row-item-info-title{
					overflow: hidden;
					color: rgba(0, 0, 0, 0.85);
					font-weight: 500;
					font-size: 14px;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.component-row-item-info-desc{
					color: rgba(0, 0, 0, 0.45);
					font-size: 12px;;
				}
			}
		}
		>.component-row-item:hover{
			-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .3);
			-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .3);
			box-shadow: 0 0 4px rgba(0, 0, 0, .3);
			cursor: pointer;
		}
	}
	
</style>